Zepto实现轮播
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" type="text/css" href="css/bass.css" />
    <style type="text/css">
        .jd_layout {
            width: 100%;
            max-width: 640px;
            min-width: 320px;
            margin: 0 auto;
            background-color: #DDDDDD;
        }
        
        .jd_search {
            width: 100%;
            max-width: 640px;
            height: 40px;
            position: fixed;
            background: rgba(233, 35, 34, 0);
            z-index: 999;
        }
        
        .jd_logo {
            width: 56px;
            height: 30px;
            position: absolute;
            left: 10px;
            top: 5px;
            font-size: 20px;
            border-radius: 10px;
            padding-left: 5px;
        }
        
        .jd_login {
            width: 40px;
            height: 40px;
            position: absolute;
            top: 0;
            right: 0;
            line-height: 40px;
            color: #fff;
        }
        
        .jd_searchBox {
            width: 100%;
            height: 100%;
            padding-left: 76px;
            padding-right: 50px;
            box-shadow: 1px 1px 1px #ddd;
        }
        
        .jd_searchBox>input {
            width: 100%;
            height: 30px;
            margin-top: 5px;
            border-radius: 15px;
            padding-left: 30px;
        }
        
        .jd_banner {
            width: 100%;
            overflow: hidden;
            position: relative;
        }
        
        .jd_bannerImg {
            /* width: 400%; */
            position: relative;
            overflow: hidden;
            /* left: -100%; */
        }
        
        .jd_bannerImg>li {
            /* width: 25%; */
            float: left;
        }
        
        .jd_bannerImg>li img {
            width: 100%;
            display: block;
        }
        
        .jd_bannerIndicator {
            width: 62px;
            height: 10px;
            position: absolute;
            left: 50%;
            bottom: 5px;
            transform: translateX(-50%);
        }
        
        .jd_bannerIndicator>li {
            width: 6px;
            height: 6px;
            border-radius: 3px;
            border: 1px solid #fff;
            float: left;
            margin-left: 10px;
        }
        
        .jd_bannerIndicator>li:first-child {
            margin-left: 0;
        }
        
        .jd_bannerIndicator>li.active {
            background-color: #fff;
        }
        
        .jd_nav {
            width: 100%;
            padding: 10px 0;
            background-color: #fff;
        }
        
        .jd_nav li {
            width: 25%;
            float: left;
            text-align: center;
            margin-top: 5px;
            overflow: hidden;
        }
        
        .jd_nav li img {
            width: 40px;
        }
        
        .jd_nav li p {
            line-height: 25px;
        }
        
        .jd_product {
            width: 100%;
        }
        
        .jd_productBox {
            width: 100%;
            margin-top: 10px;
            background-color: #fff;
            box-shadow: 1px 1px 1px #ccc;
        }
        
        .jd_productBox>.jd_pTip {
            width: 100%;
            height: 30px;
            line-height: 30px;
            border-bottom: 1px solid #ccc;
            color: #666;
        }
        
        .jd_productBox>.jd_pTip>h3 {
            position: relative;
            padding-left: 30px;
        }
        
        .jd_productBox>.jd_pTip>h3::before {
            content: "";
            position: absolute;
            width: 3px;
            height: 12px;
            background-color: #e92322;
            left: 20px;
            top: 9px;
        }
        
        .a_50 {
            width: 50%;
            display: block;
        }
        
        .a_50>img {
            width: 100%;
            display: block;
        }
        
        .b_left {
            border-left: 1px solid #ccc;
        }
        
        .b_bottom {
            border-bottom: 1px solid #ccc;
        }
        
        .b_right {
            border-right: 1px solid #ccc;
        }
        
        .jd_sk {}
        
        .jd_sk>.jd_pTip .jd_sk_text {
            color: #e92323;
        }
        
        .jd_sk>.jd_pTip .jd_sk_time span {
            width: 13px;
            height: 18px;
            display: inline-block;
            line-height: 18px;
            color: #fff;
            background-color: #000;
            text-align: center;
        }
        
        .jd_sk>.jd_pTip .jd_sk_time>span:nth-of-type(3n) {
            color: #000;
            background-color: transparent;
            width: 8px;
        }
        
        .jd_sk .jd_pContent {
            padding: 20px;
        }
        
        .jd_sk .jd_pContent>ul {
            width: 100%;
        }
        
        .jd_sk .jd_pContent>ul>li {
            width: 33.33%;
            float: left;
            text-align: center;
        }
        
        .jd_sk .jd_pContent>ul>li img {
            width: 60%;
            display: inline-block;
        }
    </style>

</head>

<body>
    <div class="jd_layout">
        <div class="jd_search">
            <a href="javascript:;" class=jd_logo>京东</a>
            <form action="" method="post" class="jd_searchBox">
                <input type="text" placeholder="请输入商品名称" />
            </form>
            <a href="javascript:;" class="jd_login">登录</a>
        </div>
        <div class="jd_banner">
            <ul class="jd_bannerImg clearfix">

                <li>
                    <a href="javascript:;">
                        <img src="./reviews/img/test1.png" alt="" />
                    </a>
                </li>
                <li>
                    <a href="javascript:;">
                        <img src="./reviews/img/test2.png" alt="" />
                    </a>
                </li>
                <li>
                    <a href="javascript:;">
                        <img src="./reviews/img/test3.png" alt="" />
                    </a>
                </li>
                <li>
                    <a href="javascript:;">
                        <img src="./reviews/img/test4.png" alt="" />
                    </a>
                </li>

            </ul>
            <ul class="jd_bannerIndicator">
                <li class="active"></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>
        <div class="jd_nav">
            <ul class="clearfix">
                <li>
                    <a href="">
                        <img src="img/lun2.JPG" alt="" />
                        <p>商品分类</p>
                    </a>
                </li>
                <li>
                    <a href="">
                        <img src="img/lun2.JPG" alt="" />
                        <p>商品分类</p>
                    </a>
                </li>
                <li>
                    <a href="">
                        <img src="img/lun2.JPG" alt="" />
                        <p>商品分类</p>
                    </a>
                </li>
                <li>
                    <a href="">
                        <img src="img/lun2.JPG" alt="" />
                        <p>商品分类</p>
                    </a>
                </li>
                <li>
                    <a href="">
                        <img src="img/lun2.JPG" alt="" />
                        <p>商品分类</p>
                    </a>
                </li>
                <li>
                    <a href="">
                        <img src="img/lun2.JPG" alt="" />
                        <p>商品分类</p>
                    </a>
                </li>
                <li>
                    <a href="">
                        <img src="img/lun2.JPG" alt="" />
                        <p>商品分类</p>
                    </a>
                </li>
                <li>
                    <a href="">
                        <img src="img/lun2.JPG" alt="" />
                        <p>商品分类</p>
                    </a>
                </li>
            </ul>
        </div>
        <div class="jd_product">
            <div class="jd_productBox clearfix jd_sk">
                <div class="jd_pTip">
                    <div class="jd_left .jd_left">
                        <span class="f_left m_left10 jd_sk_text">掌上秒杀</span>
                        <div class="jd_sk_time f_left m_left10">
                            <span>0</span>
                            <span>0</span>
                            <span>:</span>
                            <span>0</span>
                            <span>0</span>
                            <span>:</span>
                            <span>0</span>
                            <span>0</span>
                        </div>
                    </div>
                    <div class="m_right10 f_right">
                        更多秒杀...
                    </div>
                </div>
                <div class="jd_pContent clearfix">
                    <ul>
                        <li>
                            <a href="javascript:;">
                                <img src="img/new1.png" alt="" />
                            </a>
                            <p>&yen;10.00</p>
                            <p>&yen;20.00</p>
                        </li>
                        <li>
                            <a href="javascript:;">
                                <img src="img/new1.png" alt="" />
                            </a>
                            <p>&yen;10.00</p>
                            <p>&yen;20.00</p>
                        </li>
                        <li>
                            <a href="javascript:;">
                                <img src="img/new1.png" alt="" />
                            </a>
                            <p>&yen;10.00</p>
                            <p>&yen;20.00</p>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="jd_productBox clearfix">
                <div class="jd_pTip">
                    <h3>京东超市</h3>
                </div>
                <div class="jd_pContent">
                    <a href="javascript:;" class="a_50 f_left ">
                        <img src="img/des.jpg" alt="" />
                    </a>
                    <a href="javascript:;" class="a_50 f_left b_left b_bottom">
                        <img src="img/de.jpg" alt="" />
                    </a>
                    <a href="javascript:;" class="a_50 f_left b_left">
                        <img src="img/de.jpg" alt="" />
                    </a>
                </div>
            </div>
            <div class="jd_productBox clearfix">
                <div class="jd_pTip">
                    <h3>京东超市</h3>
                </div>
                <div class="jd_pContent">
                    <a href="javascript:;" class="a_50 f_right ">
                        <img src="img/des.jpg" alt="" />
                    </a>
                    <a href="javascript:;" class="a_50 f_left b_left b_bottom">
                        <img src="img/de.jpg" alt="" />
                    </a>
                    <a href="javascript:;" class="a_50 f_left b_left">
                        <img src="img/de.jpg" alt="" />
                    </a>
                </div>
            </div>
            <div class="jd_productBox clearfix">
                <div class="jd_pTip">
                    <h3>京东超市</h3>
                </div>
                <div class="jd_pContent">
                    <a href="javascript:;" class="a_50 f_left ">
                        <img src="./reviews/img/test1.png" alt="" />
                    </a>
                    <a href="javascript:;" class="a_50 f_left b_left b_bottom">
                        <img src="./reviews/img/test2.png" alt="" />
                    </a>
                    <a href="javascript:;" class="a_50 f_left b_left">
                        <img src="./reviews/img/test3.png" alt="" />
                    </a>
                </div>
            </div>

        </div>
    </div>
    <script src="./reviews/js/zepto.min.js"></script>
    <script src="./reviews/js/selector.js"></script>
    <script src="./reviews/js/fx.js"></script>
    <script src="./reviews/js/touch.min.js"></script>
    <script>
        $(function() {
            var banner = $(".jd_banner");
            var bannerWidth = banner.width();
            var imgBox = banner.find("ul:first-of-type");
            var indicator = banner.find("ul:eq(1)").find("li");
            var first = imgBox.find("li:first-of-type");
            var last = imgBox.find("li:last-of-type");
            imgBox.append(first.clone());
            last.clone().insertBefore(first);
            var lis = imgBox.find("li");
            var count = lis.length;
            imgBox.width(count * bannerWidth);
            lis.each(function(index, value) {
                $(lis[index]).width(bannerWidth);
            });
            imgBox.css("left", -bannerWidth);
            index = 1;
            var imgAnimation = function() {
                imgBox.animate(

                    {
                        "left": -index * bannerWidth
                    },
                    200,
                    "ease-in-out",
                    function() {
                        if (index == count - 1) {
                            index = 1;
                            imgBox.css("left", -index * bannerWidth);
                        } else if (index == 0) {
                            index = count - 2;
                            imgBox.css("left", -index * bannerWidth);
                        }
                        indicator.removeClass("active").eq(index - 1).addClass("active");
                    })

            }
            var timeid = setInterval(function() {
                index++;
                imgAnimation();
            }, 2000);
            /*添加滑动事件*/
            imgBox.on("tap click swipeLeft", function() {
                clearInterval(timeid);
                index++;
                imgAnimation();

            });
            imgBox.on("tap click swipeRight", function() {
                clearInterval(timeid);
                index--;
            });
            if (timeid == undefined) {
                timeid = setInterval(function() {
                    index++;
                    imgAnimation();
                }, 2000);
            }

        });
    </script>
</body>

</html>